import React, { Component } from 'react'
import Footer from './Component/Footer'
import Header from './Component/Header'
import List from './Component/List'
import './assets/css/index.css'

export default class App extends Component {
  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer todos={this.state.todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}></Footer>
        </div>
      </div>
    )
  }

  // 定义初始化状态
  state = { todos: [] }

  // 监听子组件Header传递给父组件数据
  // 这里根据实际情况，需要传过来的是一个对象
  addTodo = (todoObj) => {
    console.log(todoObj, '来自Header的数据');
    //获取原todos
    const { todos } = this.state
    //追加一个todo
    const newTodos = [todoObj, ...todos]
    //更新状态
    this.setState({ todos: newTodos })
  }

  // 用于改变一个todo对象【这里改变选中状态】
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const { todos } = this.state
    // 匹配处理数据【遍历数组】
    const newTodos = todos.map((item) => {
      // {...item,done:done}是克隆对象，修改指定key的value方法
      // 例 
      // var obj = {a:100,b:50}
      // var obj2 = {...obj,b:999}
      // console.log(obj2)   ======>打印结果是{a:100,b:999}
      if (item.id === id) return { ...item, done: done }
      else return item
    })
    this.setState({ todos: newTodos })
  }

  // 删除一个todo
  deleteTodo = (id) => {
    //获取原来的todos
    const { todos } = this.state
    //删除指定id的todo对象,filter将id不等于需要删除的项的id组成一个新数组
    const newTodos = todos.filter((item) => {
      return item.id !== id
    })
    //更新状态
    this.setState({ todos: newTodos })
  }

  // 全选
  checkAllTodo = (done) => {
    // 获取原来的todos
    const { todos } = this.state
    // 加工数据
    const newTodos = todos.map((item) => {
      return { ...item, done: done }
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }

  // 删除选中
  clearAllDone = () => {
    //获取原来的todos
    const { todos } = this.state
    //删除指定id的todo对象,filter将id不等于需要删除的项的id组成一个新数组
    const newTodos = todos.filter((item) => {
      return item.done !== true
    })
    //更新状态
    this.setState({ todos: newTodos })
  }
}
